import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

const host = process.env.TAURI_DEV_HOST

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [react()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  base: './',
  resolve: {
    alias: {
      '@': '/src',
      // '@/views': '/src/views',
      // '@/views/*': '/src/views/*',
      '@/assets': '/src/assets',
      '@/components': '/src/components',
      '@/pages': '/src/pages',
      '@/utils': '/src/utils',
      '@/hooks': '/src/hooks',
      '@/store': '/src/store',
      '@/config': '/src/config',
      '@/api': '/src/api',
      '@/router': '/src/router',
      '@/layouts': '/src/layouts',
      '@/styles': '/src/styles',
      '@/types': '/src/types',
      '@/locale': '/src/locale',
      '@/bug-manager': '/src/apps/bug-manager',
    },
  },
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 5090,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 5091,
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ['**/src-tauri/**'],
    },
    proxy: { // 代理（相当于转接，就像打电话，然后你让谁帮忙转接）
      '/api': { // 意思是，我打给 '/api', 然后让 http://localhost:3000 转接
        target: 'http://localhost:3000',
        changeOrigin: true, // 是否跨域（选择 true）
        rewrite: (path: string) => path.replace(/^\/api/, '') // 这里使用了正则表达式，表示传入的 path 参数 以 /api 开头的其中的 /api 会被删掉
      },
      '/images': {
        target: 'https://www.helloimg.com/api/v1',
        changeOrigin: true, // 是否跨域（选择 true）
        rewrite: (path: string) => path.replace(/^\/images/, ''), // 这里使用了正则表达式，表示传入的 path 参数 以 /images 开头的其中的 /images 会被删掉
        bypass(req: any, res: any, options: any) {
          //@ts-ignore
          const proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || ''
          req.headers['x-req-proxyUrl'] = proxyUrl
          res.setHeader('x-res-proxyUrl', proxyUrl)
        },
      },
      '/blapi': {
        target: 'https://api.bilibili.com',
        changeOrigin: true, // 是否跨域（选择 true）
        rewrite: (path: string) => path.replace(/^\/blapi/, ''), // 这里使用了正则表达式，表示传入的 path 参数 以 /images 开头的其中的 /images 会被删掉
        bypass(req: any, res: any, options: any) {
          //@ts-ignore
          const proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || ''
          req.headers['x-req-proxyUrl'] = proxyUrl
          res.setHeader('x-res-proxyUrl', proxyUrl)
        },
      },
      '/blpassportapi': {
        target: 'https://passport.bilibili.com',
        changeOrigin: true, // 是否跨域（选择 true）
        rewrite: (path: string) => path.replace(/^\/blpassportapi/, ''),
        bypass(req: any, res: any, options: any) {
          //@ts-ignore
          const proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || ''
          req.headers['x-req-proxyUrl'] = proxyUrl
          res.setHeader('x-res-proxyUrl', proxyUrl)
        },
      }
    }
  },
  envPrefix: ['VITE_', 'TAURI_'],
  // css预处理器
  css: {
    // px 转 vw 适配移动端
    // postcss: {
    //   plugins: [
    //     pxToViewPort({
    //       viewportWidth: 375, // (Number) The width of the viewport.
    //       viewportHeight: 667, // (Number) The height of the viewport.
    //       unitPrecision: 5, // (Number) The decimal numbers to allow the REM units to grow to.
    //       viewportUnit: 'vw', // (String) Expected units.
    //       selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
    //       minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
    //       mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    //     }),
    //   ]
    // },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(__dirname, './src/styles/var.less')}"; @import "${path.resolve(__dirname, './src/styles/global-color.less')}";`,
      }
    }
  },
}))
